<template>
  <!--     待办事项   -->
  <div class="rule-box">
    <div v-if="$route.query.formName || $route.query.name" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <div class="preset-log">
      <div style="height: 100%">
        <div class="container-box">
          <div class="page-container">
            <!-- 左侧 -->
            <CommonFilter ref="commonFilterRef" :tree="treeData" @emitSel="getSel" @handleReset="handleResetFilter" />
            <div class="right-container log-right">
              <div class="container-search">
                <el-form
                  ref="formRef"
                  :inline="true"
                  :model="formInline"
                  class="demo-form-inline"
                  style="position: relative"
                >
                  <el-row class="container-search-row">
                    <el-col class="search-col-flex" :span="24">
                      <el-form-item label="关键字" prop="serialNumber">
                        <el-input v-model="formInline.serialNumber" placeholder="流水号或标题搜索" clearable />
                      </el-form-item>
                      <el-form-item class="el-form-item-radius" label="产生时间" prop="time">
                        <el-radio-group
                          v-model="formInline.shortcut"
                          class="el-radio-radius"
                          @change="handleTimeRange($event)"
                        >
                          <el-radio-button label="day">近一日</el-radio-button>
                          <el-radio-button label="week">近一周</el-radio-button>
                          <el-radio-button class="el-radio-button-radius" label="month">近一月</el-radio-button>
                        </el-radio-group>
                        <el-date-picker
                          ref="dataPickerRef"
                          v-model="formInline.createTimeRange"
                          class="data-picker-radius"
                          type="datetimerange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :default-time="['00:00:00', '00:00:00']"
                          @change="handleChangeDatePicker"
                        />
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="handleClcikSearch">查询</el-button>
                        <el-button @click="handleReset('formRef')">重置</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div class="tab-content">
                <HkTable
                  :table-data="tableData"
                  :table-columns="tableLabelLists"
                  :selection="false"
                  :total="total"
                  :table-height="80"
                  :show-tooltip="false"
                  :operate="true"
                  :show-index="true"
                  @handleSelectionChange="handleSelectionChange"
                  @changePage="changePage"
                >
                  <!-- 处置时限 -->
                  <template #timeoutType="scope">
                    <span
                      v-if="scope.row.timeoutType !== null && scope.row.timeoutType !== undefined"
                      style="display: flex; align-items: center"
                    >
                      <img
                        style="width: 20px; margin-right: 10px"
                        :src="
                          scope.row.timeoutType == 0
                            ? require(`@/assets/images/zhuangtai2.png`)
                            : scope.row.timeoutType == 2
                              ? require(`@/assets/images/zhuangtai0.png`)
                              : require(`@/assets/images/zhuangtai1.png`)
                        "
                      >
                      {{ scope.row.timeoutType == 0 ? '未超期' : scope.row.timeoutType == 2 ? '已超期' : '即将超期' }}
                    </span>
                    <span v-else> - </span>
                  </template>
                  <template #operate="scope">
                    <el-button size="mini" type="text" @click="handleIncident(scope.row)">处置</el-button>
                  </template>
                </HkTable>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HkTable from '@/components/Hk-Table'
import CommonFilter from '../components/CommonFilter'
import { getTree } from '@/api/dispose/incidentHandling'
import { getTasksList, getTasksTree1, getTasksTree2, getTasksTree3 } from '@/api/dispose/tasks'
import { parseTime } from '@/utils/hongke.js'

export default {
  components: { HkTable, CommonFilter },

  data() {
    return {
      activeIndex: 0,
      formInline: {
        serialNumber: '',
        createTimeRange: []
      },
      // 树形组件
      treeData: [],
      defaultEventLevel: {},
      loading: false,
      tableData: [],
      total: 0,
      disposalCatalogueId: '1645593678612742145',
      queryParams: {
        isMyTodoTask: true,
        catalogueIds: ['1645593678612742145', '1691411955770966017'], //  暂时写死
        current: 1,
        size: 10
      },
      tableLabelLists: [
        { label: '流水号', param: 'serialNumber', width: '180' },
        { label: '标题', param: 'orderTitle', width: '200' },
        { label: '流程', param: 'flowName', width: '200' },
        { label: '发起人', param: 'createUserName' },
        { label: '发起时间', param: 'createTime', width: '200' },
        { label: '处置时限', param: 'timeoutType', type: 'slot' },
        { label: '当前步骤', param: 'orderTaskName' }
      ],
      tableCheckList: [],
      searchQuery: {},
      treeQuery: {}
    }
  },
  watch: {
    '$route'() {
      this.handleClcikSearch()
    }
  },
  created() {
    this.getList(this.queryParams)
    this.getLeftTree()
  },
  methods: {
    /** 查询按钮  */
    handleClcikSearch() {
      this.queryParams.current = 1
      this.handleSeach()
    },
    handleSeach() {
      this.searchQuery = { ...this.queryParams, ...this.formInline, ...this.treeQuery }
      this.getList(this.searchQuery)
      this.getLeftTree()
    },
    /** 重置  */
    handleReset(formName) {
      this[formName] = {}
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
        this.formInline = {
          keyword: '',
          createTimeRange: []
        }
        this.handleSeach()
      })
    },
    /** 获取列表数据 */
    getList(query) {
      this.loading = true
      getTasksList(query).then((res) => {
        this.loading = false
        this.tableData = res.list
        this.total = res.total
      })
    },
    /** 三种时间区间选择*/
    handleTimeRange(value) {
      const end = new Date()
      const start = new Date()
      let nstart = null
      let nend = null
      let wstart = null
      let wend = null
      let mstart = null
      let mend = null
      switch (value) {
        case 'day':
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
          nstart = this.setStartTime(start.getTime())
          nend = this.setEndTime(start.getTime())
          this.formInline.createTimeRange = [parseTime(nstart), parseTime(nend)]
          break
        case 'week':
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
          wstart = this.setStartTime(start.getTime())
          wend = this.setEndTime(end.getTime())
          this.formInline.createTimeRange = [parseTime(wstart), parseTime(wend)]
          break
        case 'month':
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
          mstart = this.setStartTime(start.getTime())
          mend = this.setEndTime(end.getTime())
          this.formInline.createTimeRange = [parseTime(mstart), parseTime(mend)]
          break
        default:
          break
      }
    },
    // time为某一天的时间戳
    setStartTime(time) {
      const nowTimeDate = new Date(time)
      return nowTimeDate.setHours(0, 0, 0, 0)
    },
    setEndTime(time) {
      const nowTimeDate = new Date(time)
      return nowTimeDate.setHours(23, 59, 59, 999)
    },
    /** 时间转化 */
    timestampToTime(timestamp) {
      const date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return Y + M + D + h + m + s
    },
    /** 时间选择器触发事件*/
    handleChangeDatePicker(value) {
      this.formInline.shortcut = ''
    },
    /** 处置 */
    handleIncident(row) {
      this.$router.push({
        path: window.prefix + '/dispose/incidentHandle/detail',
        query: { showBack: true, ids: row.serialNumber, type: 'batchId', isDiopose: true }
      })
    },
    /** 获取左侧树的数据 */
    getLeftTree() {
      // const query = { ...this.queryParams, ...this.formInline, ...this.treeQuery,title:this.queryParams.serialNumber }
      const query = {
        isMyTodoTask: this.queryParams.isMyTodoTask,
        catalogueIds: this.queryParams.catalogueIds,
        title: this.queryParams.serialNumber,
        createTimeRange: this.queryParams.createTimeRange
      }
      Promise.all([this.getTreeData1(query), this.getTreeData2(query), this.getTreeData3(query)])
        .then(res => {
          this.treeData = [...res]
        })
    },
    getTreeData1(query) {
      return getTasksTree1({ ...query, catalogueIds: [this.disposalCatalogueId] }).then(res => {
        return {
          showchild: true,
          groupName: '处置流程',
          normalGroupCode: 'process',
          children: res.map((item) => {
            return {
              groupName: item.serviceName,
              normalGroupCode: item.serviceId,
              count: item.count
            }
          })
        }
      })
    },
    getTreeData2(query) {
      return getTasksTree2(query).then(res => {
        return {
          showchild: true,
          groupName: '待办类别',
          normalGroupCode: 'catalogueGroup',
          children: res.map((item) => {
            return {
              groupName: item.catalogueName,
              normalGroupCode: item.catalogueId,
              count: item.count
            }
          })
        }
      })
    },
    /**
     * 待办类别
     * @param query
     */
    getTreeData3(query) {
      return getTasksTree3(query).then(res => {
        return {
          showchild: true,
          groupName: '处置时限',
          normalGroupCode: 'timeOutType',
          children: res.map((item) => {
            return {
              groupName: item.timeoutType === 0 ? '未超期' : item.timeoutType === 2 ? '已超期' : '即将超期',
              normalGroupCode: item.timeoutType,
              count: item.count
            }
          })
        }
      })
    },
    /** 左侧树点击事件 */
    getSel(data, checkData) {
      this.treeQuery = {
        serviceIds: [],
        timeoutTypes: []
      }
      this.treeData.forEach(i => {
        i.children.forEach(j => {
          if (checkData.includes(j.groupName)) {
            if (i.normalGroupCode === 'process') {
              this.treeQuery.serviceIds.push(j.normalGroupCode)
            } else if (i.normalGroupCode === 'catalogueGroup') {
              this.treeQuery.catalogueIds = this.treeQuery.catalogueIds ? this.treeQuery.catalogueIds : []
              this.treeQuery.catalogueIds.push(j.normalGroupCode)
            } else {
              this.treeQuery.timeoutTypes.push(j.normalGroupCode)
            }
          }
        })
      })
      this.handleSeach()
    },
    //  点击重置按钮
    handleResetFilter() {
      this.treeQuery = {}
      this.handleSeach()
    },
    /** 切换处置tabs */
    handleChangeTab(value, index) {
      this.queryParams.disposalStatus = value
      this.queryParams.current = 1
      this.activeIndex = index
      this.handleSeach()
    },
    /** 列表复选框 */
    handleSelectionChange(data) {
      this.tableCheckList = data
    },
    changePage(data) {
      this.queryParams.current = data.current
      this.queryParams.size = data.size
      this.handleSeach()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px !important;
}

.el-form-item-radius {
  ::v-deep .el-form-item__content {
    display: flex !important;
    align-items: flex-start !important;
  }
}

.demo-form-inline {
  flex-wrap: wrap;

  .container-search-row {
    display: flex;

    .search-form-item {
      width: 15%;
      margin-right: 10px;
    }

    &.high-search-row {
      padding: 10px;
      background: #f3f5fc;
      border-top: 1px solid #4b6eef;
      position: relative;

      &::before {
        display: inline-block;
        content: '';
        position: absolute;
        width: 10px;
        border-bottom: 6px solid #4b6eef;
        border-top: 6px solid transparent;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        top: -13px;
        left: 5%;
      }
    }

    width: 100%;

    .el-col {
      display: flex;
      align-items: flex-end;
      margin-bottom: 10px;
    }

    .data-picker-radius {
      border-left: 0 !important;
      border-radius: 0 4px 4px 0 !important;
    }
  }
}

.preset-log {
  height: 100%;
  background: #eef0f5;
  padding: 0px;

  .page-container {
    background: #fff;
    overflow: auto;

    .left-container {
      overflow: auto;
    }

    .right-container {
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .targetTable {
        flex: 1;
        // overflow: auto;
      }
    }
  }

  .el-form {
    display: flex;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }

  .container-box {
    height: 100%;

    .container-search {
      padding: 0 15px 15px;
      background: #fff;
    }
  }

  .left-container {
    height: 100%;
    border-top: 0px !important;
  }

  // 跳转的部分
  .m-container {
    width: 100%;
    height: 100%;
    background: #e5ecf6;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 14px;
    // 头部
    .m-header {
      background: #fff;
      box-shadow: 0 0 40px 0 rgb(0 0 0 / 8%);
      border-radius: 4px;
      margin-bottom: 10px;
    }

    // 线
    .header-line {
      width: 100%;
      height: 38px;
      line-height: 38px;
      padding: 0 8px;
      border-bottom: 1px solid #e8e8e8;
      cursor: pointer;
    }

    .filter-source {
      padding: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .drawmain {
      padding: 0 16px 10px 16px;

      .addSearchParam-container {
        max-height: 265px;
        height: 100%;
        overflow: auto;

        .one-level-search-content {
          position: relative;
          padding-left: 40px;
          padding-bottom: 4px;

          .change-one-level-btn {
            position: absolute;
            left: 0;
            top: calc(50% - 6px);
            z-index: 3;
            padding: 0;
            width: 24px;
            height: 24px;
            color: #2979ff;
            border: none;
            background: #edf5ff;
            border-radius: 2px;
          }

          .addSearchParam {
            width: 100%;
            margin-bottom: 8px;
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 20%;
            background-color: #f8f9fc;
            border: 1px solid #f0f0f0;

            &::after {
              content: '';
              position: absolute;
              top: -11px;
              left: -29px;
              bottom: -11px;
              border-left: 1px solid #cfe4fe;
            }

            .content {
              flex: 1;
              overflow-y: auto;
              display: flex;
              padding: 16px;
              justify-content: space-between;
              align-items: end;

              & > div {
                width: 60%;
                height: 100%;
                overflow-y: auto;
              }

              .searchContent {
                display: table;
                max-height: 93%;
                position: relative;
                padding-left: 29px;
              }

              .add-btn {
                padding-left: 10px;
              }
            }
          }
        }
      }
    }
  }

  .params-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: -4px;
      left: -15px;
      bottom: -15px;
      border-left: 1px solid #cfe4fe;
    }

    .params-input {
      margin-right: 8px;
    }
  }

  .add-search-bottom {
    display: flex;
    justify-content: space-between;
    padding-left: 40px;
  }

  .l-container {
    background: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .total {
      padding: 8px;
      font-size: 14px;
    }
  }
}

::v-deep .el-tabs__nav-wrap::after {
  background: transparent !important;
}

.tabs {
  span {
    margin-right: 15px;
    cursor: pointer;
    padding: 8px 15px;
    border-bottom: 2px solid transparent;

    &.tab_active {
      display: inline-block;
      color: #4b6eef;
      border-bottom: 2px solid #4b6eef;
    }
  }
}

.tab-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .tab-header {
    position: absolute;
    top: 24px;
    font-size: 14px;
    right: 2%;
    z-index: 2;
    width: 94%;
    display: flex;
    align-items: center;

    .left-btn {
      flex: 1;
    }

    .right-btn {
      span {
        display: inline-block;
        padding: 10px 0;
        cursor: pointer;
        margin-left: 20px;
      }
    }
  }
}

.tablelist-title {
  font-weight: 900;
  margin: 10px 0;
}

::v-deep .el-table__body-wrapper {
  //height: calc(100% - 50px) !important;
}

::v-deep .el-button--danger.is-plain:focus {
  background: transparent !important;
  color: #ff4949 !important;
}

::v-deep .description {
  width: 90%;
  display: inline-block;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

::v-deep .text-ellipsis {
  width: calc(100% - 140px);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
